// 要使用防抖和节流第一步 npm i lodash
// 引入这个包 debounce是防抖  throttle是节流
// 使用防抖或者节流包住自己得功能函数
// 防抖 debounce(自己得函数，毫秒为单位得时间)
// 节流 throttle(自己得函数，毫秒为单位的时间,{leading:false,trailing:true})}) // 不加第三个参数可以正常运行就不用加，不行在加
import React, { Component } from 'react'
import {connect} from "react-redux"
import {debounce,throttle} from "lodash"
import * as action from "../action/index.js"
import {bindActionCreators} from "redux"
class Fenyeqi extends Component {
    state = {
        total:0, // 一共有几页
        arr:0 // 要渲染的页数
    }
    componentDidMount(){
        console.log(this.props)
        this.props.getList()
       setTimeout(()=>{
           this.setState({
               total:Math.ceil(this.props.arr.length/5) // 设置了一共有多少页
           })
           // 只要在延时器里this.setSate就变成同步得了
           console.log(this.state.total)
           let crr = [];
           for(let i =1;i<=this.state.total;i++) {
               crr.push(i)
           }
           this.setState({
            arr:crr
           })
       },100)
    
    }
    // 点击分页器页码得方法
    checkIndex(item){
        this.props.chengePage(item)
    }
   // 点击上一页的事件
   prev(){
     if (this.props.indexActive <= 1) {
          alert("您不能在上一页了")
     } else {
        this.props.chengePage(this.props.indexActive-1)
     }
   }
   // 点击下一页得方法 
   next(){
    if (this.props.indexActive >= this.state.total) {
        //this.props.indexActive = this.state.total
        alert("您已经到最后一页l")
    } else{
        this.props.chengePage(this.props.indexActive+1)
    }
  

   }
  render() {
    return (
      <div>
             <span onClick={this.prev.bind(this)}>上一页</span>
              {
                this.state.arr&&this.state.arr.length? this.state.arr.map((item,index)=>{
                    return <span key={index} style={{fontSize:"25px",marginLeft:"20px"}} onClick={ this.checkIndex.bind(this,item)} className={item==this.props.indexActive?"active":""}>{item}</span>
                    // return <span key={index} style={{fontSize:"25px",marginLeft:"20px"}} onClick={ throttle(this.checkIndex.bind(this,item),1000,{leading:false,trailing:true})} className={item==this.props.indexActive?"active":""}>{item}</span>
                }):""
            }
            <span onClick={this.next.bind(this)}>下一页</span>
          
      </div>
    )
  }
}
let mapStateToprops = (state)=>{
    console.log(state)
      return {
          ...state.antdReducer
      }
}
let mapDispatchToprops =(disptach)=>bindActionCreators(action,disptach)
export default connect(mapStateToprops,mapDispatchToprops)(Fenyeqi)